<template>
	<div>
		<el-header>
			<img class="logo" src="../../../public/img/logo.png" alt />
			<div class="user-info">
				<span class="role">您好！<span>{{ userRole }}</span></span>
        <el-divider direction="vertical"></el-divider>
        <span class="name">{{ username }}</span>
				<el-divider direction="vertical"></el-divider>
				<span class="logout" @click="logout">退出</span>
			</div>
		</el-header>
	</div>
</template>

<script>
export default {
	name: "common-header",
	data() {
		return {
			changePwdVisible: false,
			constRole: "",
			username: "",
			userRole: ""
		};
	},
	components: {},
	methods: {
		logout() {
			this.$confirm("此操作将登出当前用户, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.sendLoginout();
				})
				.catch(() => {});
		},
		sendLoginout() {
			console.log("ddd")
			this.$router.push({name:'login'})
		}
	},
	created() {
  }
};
</script>

<style lang="less" scoped>
.el-header {
	width: 100%;
	height: 56px !important;
	line-height: 56px;
	padding: 0 20px 0 44px;
	background: #ffffff;
	box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
	box-sizing: border-box;
	position: fixed;
	z-index: 3;
	top: 0;
}
.logo {
	float: left;
	height: 33px;
	margin-top: 12px;
}
.title {
	float: left;
	margin-left: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #00dfb9;
}
.user-info {
	float: right;
	font-size: 12px;
	font-weight: 400;
	color: #17243f;
}
.role {
	margin-right: 20px;
	color: #00dfb9;
	span {
		margin-left: 10px;
	}
}
.name {
	margin: 0 20px;
}
.logout {
	margin: 0 20px;
	cursor: pointer;
}
.change-pwd {
	cursor: pointer;
}
.el-divider--vertical {
	width: 1px;
	height: 24px;
	margin: 0;
	background-color: #d8dfea;
}
</style>

